<template>
   <div class="index-chugui">
        <div class="container">
           <div class="title">
                <h1 class="ac-title">橱柜专区</h1>
                <router-link to = "/" class="go">查看更多></router-link>    
           </div>
            <div class="body"> 
                <div class="item">
                    <img src="@/assets/index/chugui1.jpg" alt="">
                    <div class="buyBG">
                        <h1>16㎡全屋定制</h1>
                        <p>E0级健康板材</p>
                        <p>不限平开门移门</p>
                        <p>四种颜色可选</p>
                        <h2><span>￥</span>12800</h2>
                        <div class="buy"><img src="@/assets/index/chugui-btn2.png" alt=""></div>
                    </div>
                </div>
                <div class="item right">
                    <img src="@/assets/index/chugui2.jpg" alt="">
                    <div class="buyBG">
                        <h1>16㎡全屋定制</h1>
                        <p>E0级健康板材</p>
                        <p>不限平开门移门</p>
                        <p>四种颜色可选</p>
                        <h2><span>￥</span>12800</h2>
                        <div class="buy"><img src="@/assets/index/chugui-btn2.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="body body2">
                <div class="item item2">
                    <img src="@/assets/index/chugui3.jpg" alt="">
                    <div class="buyBG">
                        <h1>16㎡全屋定制</h1>
                        <p>E0级健康板材</p>
                        <p>不限平开门移门</p>
                        <p>四种颜色可选</p>
                        <h2><span>￥</span>12800</h2>
                        <div class="buy"><img src="@/assets/index/chugui-btn2.png" alt=""></div>
                    </div>
                </div>
                <div class="item item2">
                    <img src="@/assets/index/chugui4.jpg" alt="">
                    <div class="buyBG">
                        <h1>16㎡全屋定制</h1>
                        <p>E0级健康板材</p>
                        <p>不限平开门移门</p>
                        <p>四种颜色可选</p>
                        <h2><span>￥</span>12800</h2>
                        <div class="buy"><img src="@/assets/index/chugui-btn2.png" alt=""></div>
                    </div>
                </div>
                <div class="item item2">
                    <img src="@/assets/index/chugui5.jpg" alt="">
                    <div class="buyBG">
                        <h1>16㎡全屋定制</h1>
                        <p>E0级健康板材</p>
                        <p>不限平开门移门</p>
                        <p>四种颜色可选</p>
                        <h2><span>￥</span>12800</h2>
                        <div class="buy"><img src="@/assets/index/chugui-btn2.png" alt=""></div>
                    </div>
                </div>
            </div>
       </div>
      
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'IndexChugui',
  data () {
    return {
      msg: 'index',
     
     
     
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
   
    
  },
  methods: {
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
 a
    color black
.title  
    overflow hidden
.container
    container() 
.title>h1
  title()
.ac-title::after
  titleAfter()
.go
  go()
.body
    overflow hidden
    margin-top 15px
.item
    float left
    position relative
    color white
    .buyBG
        background rgba(0,0,0,0.6)
        height 100%
        width 0
        overflow hidden
        position absolute
        right 0
        top 0
        display flex
        flex-direction column
        justify-content center
        transition all 0.3s
        .buy
            width 120px
            margin 0  auto
            margin-top 5px
.buyBG>h1,.buyBG>h2,.buyBG>p
    text-align center
.buyBG>h1
    margin-bottom 15px
    font-size 20px
.buyBG>p
    font-size 14px
    line-height 20px
.buyBG>h2
    margin-top 25px
    font-size 30px
.buyBG>h2>span
    font-size 12px
.right
    float right
.item:hover>.buyBG
    width 180px
.item2
    margin 0 5px
</style>
